<template>
  <div id="content">
    <div class="header">
      <div>歌曲</div>
      <div>歌手</div>
      <div>时长</div>
    </div>
    <div class="box">
      <div class="cont" v-for="(item,index) in songList" :key="index" @dblclick="playMusic(item.id)">
        <div class="hr"></div>
        <div>{{ }}</div>
        <div>{{item.name}}</div>
        <div>{{item.ar[0].name}}</div>
        <div>{{item.dt}}</div>
      </div>
    </div>
  </div>
</template>
<script>
  import axios from 'axios'
  export default {
    methods: {
      playMusic(id) {
        axios({
          url: 'http://music.eleuu.com/song/url',
          method: 'get',
          params: {
            id
          }
        }).then(res => {
          console.log(
            res
          );
          if (res.data.data[0].url != null) {
            this.$parent.$parent.$children[3].playmusic(id)
          } else {
            alert('不能播放该歌曲')
          }
        })
      }
    },
    created() {
      axios({
        url: 'http://music.eleuu.com/playlist/detail',
        method: 'get',
        params: {
          id: this.$route.query.q
        }
      }).then(res => {
        this.songList = res.data.playlist.tracks
        for (let i = 0; i < this.songList.length; i++) {
          let min = parseInt(this.songList[i].dt / 1000 / 60)
          let sec = parseInt((this.songList[i].dt / 1000) % 60)
          if (min < 10) {
            min = '0' + min
          }
          if (sec < 10) {
            sec = '0' + sec
          }
          this.songList[i].dt = min + ":" + sec
        }
      })
    },
    data() {
      return {
        songList: []
      }
    }
  }

</script>
<style scoped>
  #content {
    position: relative;
    left: 5%;
    color: rgb(255, 255, 255, 0.8);
    position: absolute;
  }

  .hr {
    width: 1000px;
    height: 1px;
    background: rgba(255, 255, 255, 0.3);
  }

  .header {
    position: relative;
    top: 20%;
    height: 50px;
    width: 100%;
  }

  .header div {
    position: absolute;
  }

  .header div:nth-child(1) {
    left: 5%;
  }

  .header div:nth-child(2) {
    left: 54%;
  }

  .header div:nth-child(3) {
    left: 89.2%;
  }

  .cont {
    position: relative;
    height: 50px;
  }

  .cont div:nth-child(2),
  .cont div:nth-child(3),
  .cont div:nth-child(4),
  .cont div:nth-child(5) {
    position: absolute;
    left: 0%;
    padding: 10px;
  }

  .cont div:nth-child(3) {
    left: 4%;
  }

  .cont div:nth-child(4) {
    left: 53%;
  }

  .cont div:nth-child(5) {
    left: 88%;
  }

  .box {
    height: 400px;
    overflow-y: scroll;
  }

  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  /*定义滚动条轨道 内阴影+圆角*/
  ::-webkit-scrollbar-track {
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.3);
  }

  /*定义滑块 内阴影+圆角*/
  ::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: rgb(255, 255, 255, 0.7);
  }

</style>
